<template>
    <div class="home">
        <v-Head></v-Head>
       <div class="content">
           <div class="poster">
               <div>
                   <span class="post">
                   <i class="fa fa-volume-up"></i> 最新公告
               </span>
               </div>
               <div class="newPost">
                   <ul class="infinite-list">
                       <vue-seamless-scroll
                               :data="tableData"
                               class="seamless-warp"
                               style="display: flex"
                               :class-option="optionSetting">
                       <li v-for="item in tableData" class="infinite-list-item" @click="post">
                           <span class="span" style="width: 15%">• {{item.title}}</span>
                           <span class="span" style="width: 40%;margin-left: 8%">• {{item.content}}</span>
                           <span class="span" style="width: 20%;margin-left: 10%">• {{item.createtime | dateFormat}}
                               <span style="font-weight: bold;color: rgb(73, 149, 247);margin-left: 8%">更多</span>
                           </span>
                       </li>
                       </vue-seamless-scroll>
                   </ul>
               </div>
           </div>

           <div class="top">
               <el-row :gutter="12">
                   <el-col :span="8">
                       <el-card shadow="always">
                           <div class="card">
                               <div class="icon">
                                   <i class="fa fa-user" aria-hidden="true" style="font-size: 66px;color: #389af9"></i>
                               </div>
                               <div class="text">
                                   <div class="number" style="margin-top: -3px">{{form.users}}</div>
                                   <div class="desc">系统用户数</div>
                               </div>
                           </div>
                       </el-card>
                   </el-col>
                   <el-col :span="8">
                       <el-card shadow="always">
                           <div class="card">
                               <div class="icon"><i class="fa fa-file-text-o" aria-hidden="true" style="font-size: 66px;color: rgb(174 232 106)"></i></div>
                               <div class="text">
                                   <div class="number">{{form.pays}}</div>
                                   <div class="desc">计费订单数量</div>
                               </div>
                           </div>
                       </el-card>
                   </el-col>
                   <el-col :span="8">
                       <el-card shadow="always">
                           <div class="card">
                               <div class="icon"><i class="fa fa-car" aria-hidden="true" style="font-size: 66px;color: rgb(242 185 14)"></i></div>
                               <div class="text">
                                   <div class="number">{{form.cars}}</div>
                                   <div class="desc">车位总量</div>
                               </div>
                           </div>
                       </el-card>
                   </el-col>
                   <el-col :span="8">
                       <el-card shadow="always">
                           <div class="card">
                               <div class="icon"><i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 66px;color: rgb(178 139 124)"></i></div>
<!--                               <div class="icon"><i class="fa fa-comments-o" aria-hidden="true" style="font-size: 66px;color: rgb(178 139 124)"></i></div>-->
                               <div class="text">
                                   <div class="number">{{form.feedbacks}}</div>
                                   <div class="desc">用户反馈数量</div>
                               </div>
                           </div>
                       </el-card>
                   </el-col>
               </el-row>
           </div>

           <div class="mid">
               <el-row>
                   <el-col>
                       <el-card shadow="always" class="midCard">
                           <div id="pie1" class="pie" style="height: 290px">
                               <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                               <div id="chartPie" style="float:left;width:100%;height: 340px;margin-top: -15px" />
                           </div>
                       </el-card>
                   </el-col>

                   <el-col>
                       <el-card shadow="always" class="midCard">
                           <div>
                               <div class="echart" id="mychart" :style="myChartStyle"></div>
                           </div>
                       </el-card>
                   </el-col>

                   <el-col>
                       <el-card shadow="always" class="midCard">
                           <div>
                               <div id="payCharts" :style="{ width: '100%', height: '290px',marginTop: '-15px' }"></div>
                           </div>
                       </el-card>
                   </el-col>
               </el-row>
           </div>

           <div class="down">
               <el-row>
                   <el-col style="width: 72%;margin-left: -1.5%">
                       <el-card shadow="always" class="downCard">
<!--                           <div>-->
<!--                               <div id="loginChart" :style="{ width: '100%', height: '250px',marginTop: '-15px' }"></div>-->
<!--                           </div>-->

<!--                           <div class="month_title">-->
<!--                               <p>当月用户访问情况</p>-->
<!--                           </div>-->
                           <ve-line :data="monthData" :extend="chartExtend" :legend="legend" :title="title" width="100%" height="290px"></ve-line>
                       </el-card>
                   </el-col>
                   <el-col style="width: 25.2%">
                       <el-card shadow="always" class="downCardRight">
                           <div v-if="this.type == '1'">
                               <el-table
                                       :data="repairData"
                                       style="width: 100%;margin-top: 6px">
                                   <el-table-column
                                           prop="repaircontent"
                                           show-overflow-tooltip
                                           label="维修内容"
                                           align="left"
                                           min-width="35%">
                                   </el-table-column>
                                   <el-table-column
                                           prop="createtime"
                                           label="报修时间"
                                           :formatter="dateFormat"
                                           align="center"
                                           min-width="45%"
                                           show-overflow-tooltip>
                                   </el-table-column>
                                   <el-table-column
                                           align="center"
                                           :formatter="typeFormatter"
                                           prop="ressultstatus"
                                           min-width="20%"
                                           label="状态">
                                       <template slot-scope="scope">
                                           <el-popover trigger="hover" placement="top">
                                               <p>状态:{{ scope.row.resultstatus}}</p>
                                               <div slot="reference" class="name-wrapper">
                                                   <el-tag size="mini" v-if="scope.row.resultstatus==1" style="width: 90%;height: 60%;background-color: rgba(186,255,151,0.37);color: #7eb982;font-size: 12px;border-color: rgba(186,255,151,0.37)">已修复</el-tag>
                                                   <el-tag size="mini" v-else style="width: 90%;height: 60%;background-color: rgba(255,208,156,0.43);color: #df8f2a;border-color: rgba(255,208,156,0.43)">待处理</el-tag>
                                               </div>
                                           </el-popover>
                                       </template>
                                   </el-table-column>
                               </el-table>
                               <div class="block" style="text-align: center;margin-top: 8px">
                                   <el-pagination @current-change="handleCurrentChange"
                                                  layout="prev, pager, next"
                                                  :current-page.sync="iPagination.current"
                                                  :page-size='iPagination.pageSize'
                                                  :page-sizes="iPagination.pageSizeOptions"
                                                  :total="iPagination.total"
                                                  @size-change="handleSizeChange">
                                   </el-pagination>
                               </div>
<!--                               <div style="font-size: 14px">-->
<!--                                   <p>反馈问题<span style="margin-left: 60px">反馈时间</span><span style="margin-left: 75px">状态</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                                   <p style="margin-top: 6px">最近有点超   <span style="margin-left: 20px">2022-4-16 10:25:30</span><span style="margin-left: 20px">已处理</span></p>-->
<!--                               </div>-->
                           </div>
                           <div v-else>
                               <div class="row">
                                   <el-input
                                           size="mini"
                                           placeholder="请输入用户名"
                                           @keyup.enter.native="search"
                                           suffix-icon="el-icon-search"
                                           v-model="input">
                                   </el-input>
                               </div>
                               <el-table
                                       :data="personalData"
                                       height="200"
                                       v-loading="loading"
                                       style="width: 100%;">
                                   <el-table-column
                                           prop="username"
                                           show-overflow-tooltip
                                           label="我的账户"
                                           align="left"
                                           min-width="20%">
                                   </el-table-column>
                                   <el-table-column
                                           prop="parkstatus"
                                           label="车位状态"
                                           :formatter="statusFormatter"
                                           align="center"
                                           min-width="30%"
                                           show-overflow-tooltip>
                                   </el-table-column>
                                   <el-table-column
                                           align="center"
                                           :formatter="costStatusFormatter"
                                           prop="coststatus"
                                           min-width="20%"
                                           label="缴费状态">
<!--                                       <template slot-scope="scope">-->
<!--                                           <el-popover trigger="hover" placement="top">-->
<!--                                               <p>状态:{{ scope.row.coststatus}}</p>-->
<!--                                               <div slot="reference" class="name-wrapper">-->
<!--                                                   <el-tag size="mini" v-if="scope.row.coststatus==1" style="width: 90%;height: 60%;background-color: rgba(186,255,151,0.37);color: #7eb982;font-size: 12px;border-color: rgba(186,255,151,0.37)">已支付</el-tag>-->
<!--                                                   <el-tag size="mini" v-if="scope.row.coststatus==2" style="width: 90%;height: 60%;background-color: rgba(255,208,156,0.43);color: #df8f2a;border-color: rgba(255,208,156,0.43)">未支付</el-tag>-->
<!--                                                   <el-tag size="mini" v-else style="width: 90%;height: 60%;background-color: rgba(255,208,156,0.43);color: #df8f2a;border-color: rgba(255,208,156,0.43)">暂无</el-tag>-->
<!--                                               </div>-->
<!--                                           </el-popover>-->
<!--                                       </template>-->
                                   </el-table-column>
                               </el-table>
                               <div class="pagination" style="text-align: center">
                                   <el-pagination @current-change="handleUserCurrentChange"
                                                  layout="prev, pager, next"
                                                  small
                                                  :pager-count="5"
                                                  :page-size='pageSize'
                                                  :current-page="cur_page"
                                                  :page-sizes="[4, 10, 20, 50]"
                                                  :total="total"
                                                  @size-change="handleUserSizeChange">
                                   </el-pagination>
                               </div>
                           </div>
                       </el-card>
                   </el-col>
               </el-row>
           </div>

       </div>
    </div>
</template>

<script>
    // import zrender from 'zrender'
    import * as echarts from 'echarts'
    import moment from 'moment'
    import vHead from "../components/header"
    export default {
        name: "index",
        components:{
            vHead
        },
        data(){
            this.title = { text: "当月用户访问情况" };
            this.legend = { top: "0" };
            this.chartExtend = {
                series: {
                    smooth: true,  // 将曲线变为直线
                    type: 'line'
                },
                toolbox: {
                    show: true,
                    orient: 'horizontal',
                    left: 'right',
                    position: 'relative',
                    iconStyle: {
                        borderColor: "#28b283",  // 图标hover颜色
                    },

                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false,},
                        restore: { show: true },
                        saveAsImage: { show: true},
                        magicType: {//动态类型切换
                            type: ['bar', 'line']
                        },
                        dataZoom :{                             //数据区域缩放。目前只支持直角坐标系的缩放
                            show: true,                         //是否显示该工具。
                            title:"缩放",                       //缩放和还原的标题文本
                            xAxisIndex:0,                       //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
                            yAxisIndex:false,                   //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
                        },
                    }
                },
                // color:['#E4004F','#64C9FA']
            };
            return{
                type: '',
                repairData: [],
                personalData: [],
                loading: false,
                monthData: {
                    columns: ['小时','用户访问量'],
                    rows: []
                },
                chartPie: '',
                animate: false,
                count: 0, // 当前索引
                tableData: [],
                iPagination: {
                    current: 1,
                    pageSize: 4,
                    pageSizeOptions: [4, 10, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 4,
                },
                total: 0,
                cur_page: 1,
                pageSize: 4,
                pageNo: 1,
                input:'',
                form:{
                    users: '',
                    pays: '',
                    cars: '',
                    feedbacks: '',
                    aa: '',
                    bb: '',
                    cc: '',
                    dd: '',
                    carA: '',
                    carB: '',
                    carC: '',
                    carD: '',
                    carSA: '',
                    carSB: '',
                    carSC: '',
                    carSD: '',
                    carCA: '',
                    carCB: '',
                    carCC: '',
                    carCD: '',
                    payDF: '',
                    paySFY: '',
                    paySFL: '',
                    payTRQ: '',
                    payWYF: '',
                    payKDF: ''
                },
                // xData: ["A区车位", "B区车位", "C区车位", "D区车位"], //横坐标
                // yData: [{value: this.carA},{value:9},{value:10},{value:10}], //人数数据
                // taskDate: [10, 11, 9, 17],
                myChartStyle: { float: "left", width: "100%", height: "300px",marginTop:"-8px" } //图表样式
            }
        },
        // 数字转中文过滤
        filters:{
            status(value){
                if (value == '1'){
                    return '已修复'
                } else {
                    return '待处理'
                }
            }
        },
        computed: {
            optionSetting() {
                return {
                    step: 1.5, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 55, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
                };
            },
        },
        // 时间格式转化
        filters: {
            dateFormat (val) {
                if (val == null || val == '') {
                    return ''
                } else {
                    let d = new Date(val) // val 为表格内取到的后台时间
                    let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
                    let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
                    let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
                    let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
                    let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
                    let times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
                    return times
                }
            }
        },
        created() {
            let token = sessionStorage.token;
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });
            this.getPoster();
            this.getUsers();
            this.getPays();
            this.getCars();
            this.getFeedbacks();
        },
        mounted(){
            // 饼图
            this.initData();
            this.getHouseData();
            this.getHouseData2();
            this.getHouseData3();
            this.getHouseData4();

            // 柱状图
            this.initBarChart();
            this.getCarsA();
            this.getCarStatusA();
            this.getCarsB();
            this.getCarStatusB();
            this.getCarsC();
            this.getCarStatusC();
            this.getCarsD();
            this.getCarStatusD();
            this.getCarCostA();
            this.getCarCostB();
            this.getCarCostC();
            this.getCarCostD();

            // 雷达图
            this.payLine();
            this.getCostDF();
            this.getCostSFY();
            this.getCostSFL();
            this.getCostTRQ();
            this.getCostWYF();
            this.getCostKDF();

            // 折线图
            this.initLogin();
            // this.initLog();

            this.getRepairData()
            this.getMyData()

        },
        methods:{
            // load () {
            //     this.count += 2
            // }
            // 获取公告列表
            getPoster(){
                this.$Axios({
                    url: '/poster/getPosterData',
                    method: 'get',
                    data:{
                        currPage: 0,
                        pageNum: 100,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                    }
                })
            },
            // 跳转到公告列表
            post(){
                this.$router.push({
                    name: 'postMessage'
                })
            },

            // 获取总用户数
            getUsers(){
                this.$Axios({
                    url: '/users/getUsersData',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.users = result.total;
                    }
                })
            },
            // 获取计费订单总数
            getPays(){
                this.$Axios({
                    url: '/cost/getPayMessage',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.pays = result.total;
                    }
                })
            },

            // 获取车位数量
            getCars(){
                this.$Axios({
                    url: '/parking/getParkOrder',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.cars = result.total;
                    }
                })
            },

            // 获取反馈总数
            getFeedbacks(){
                this.$Axios({
                    url: '/poster/getFeedBack',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.feedbacks = result.total;
                    }
                })
            },

            // 小区分布echarts饼图
            initData() {
                // 基于准备好的dom，初始化echarts实例
                this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
                this.chartPie.setOption({
                    title: {
                        text: '小区分布统计',
                        //subtext: '纯属虚构',
                        x: 'center',
                        textStyle: {
                            fontSize: 19 // 文字的字体大小
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)' // 具体a b c d 代表的属性看下面注释啦
                    },
                    //左上侧分类条形符
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['A区','B区','C区','D区']
                        // data:[]
                    },
                    toolbox: {
                        show: true,
                        orient: 'horizontal',
                        left: 'right',
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true },
                        }
                    },
                    series: [
                        {
                            name: '小区分布', // formatter 中的a
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '45%'],
                            data: [
                                { value: this.form.aa, name: 'A区', itemStyle: { color: '#D8ECFF' }, label: { color: '#666666' }, labelLine: { lineStyle: { color: '#666666' }}},
                                { value: this.form.bb, name: 'B区', itemStyle: { color: '#b0f5aa' }, label: { color: '#74f55d' }},
                                { value: this.form.cc, name: 'C区', itemStyle: { color: '#339DFF' }},
                                { value: this.form.dd, name: 'D区', itemStyle: { color: '#f5de6c' }}
                            ], // data 中的name为formatter中的 b；data中的value呢就是formatter中c；至于d就是Echarts计算出来的百分比啦；itemStyle:为饼图每个扇形的颜色；label为指示线后面的文字的样式，labelLine为指示线的颜色
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 400,
                                        fontSize: 12 // 文字的字体大小
                                    },
                                    formatter: '{b} \n {c}幢' // 这里为指示线后面的提示信息，这里的换行要用\n 与上面tooltips中的formatter换行不同滴
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
                // window.onresize = myChart.resize  //自适应浏览器窗口的大小




            },
            getHouseData(){
               this.$Axios({
                   url: '/house/searchList',
                   method: 'get',
                   data:{
                       unitname: 'A',
                       currPage: this.iPagination.current,
                       pageNum: this.iPagination.pageSize,
                   },
                   success: (result)=>{
                       this.form.aa = result.total;
                       console.log(this.form.aa,3333)
                       this.initData()
                   }
               })
            },
            getHouseData2(){
                this.$Axios({
                    url: '/house/searchList',
                    method: 'get',
                    data:{
                        unitname: 'B',
                        currPage: this.iPagination.current,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.form.bb = result.total;
                        // console.log(this.form.pp,3333)
                        this.initData()
                    }
                })
            },
            getHouseData3(){
                this.$Axios({
                    url: '/house/searchList',
                    method: 'get',
                    data:{
                        unitname: 'C',
                        currPage: this.iPagination.current,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.form.cc = result.total;
                        // console.log(this.form.pp,3333)
                        this.initData()
                    }
                })
            },
            getHouseData4(){
                this.$Axios({
                    url: '/house/searchList',
                    method: 'get',
                    data:{
                        unitname: 'D',
                        currPage: this.iPagination.current,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.form.dd = result.total;
                        // console.log(this.form.pp,3333)
                        this.initData()
                    }
                })
            },



            // 双柱状图
            initBarChart() {
                // 多列柱状图
                const carsChar = {
                    title: {
                        text: '车位数/已分配量/已缴费',
                        //subtext: '纯属虚构',
                        left: 'left',
                        textStyle: {
                            fontSize: 15 // 文字的字体大小
                        },
                    },
                    xAxis: {
                        data: ["A区车位", "B区车位", "C区车位", "D区车位"], //横坐标
                    },
                    // 图例
                    legend: {
                        data: ["车位数", "已分配量", "已缴费"],
                        right: "2%"
                    },
                    // toolbox: {
                    //     show: true,
                    //     orient: 'vertical',
                    //     right: '-1%',
                    //     top: 'center',
                    //     iconStyle: {
                    //         borderColor: "#5470c6",  // 图标hover颜色
                    //     },
                    //
                    //     feature: {
                    //         mark: { show: true },
                    //         dataView: { show: true, readOnly: false,lang: ['数据视图', '关闭', '刷新'], },
                    //         restore: { show: true },
                    //         saveAsImage: { show: true},
                    //         magicType: {//动态类型切换
                    //             type: ['bar', 'line']
                    //         },
                    //         dataZoom :{                             //数据区域缩放。目前只支持直角坐标系的缩放
                    //             show: true,                         //是否显示该工具。
                    //             title:"缩放",                       //缩放和还原的标题文本
                    //             xAxisIndex:0,                       //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
                    //             yAxisIndex:false,                   //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
                    //         },
                    //     }
                    // },
                    yAxis: {},
                    series: [
                        {
                            type: "bar", //形状为柱状图
                            data: [this.form.carA,this.form.carB,this.form.carC,this.form.carD],
                            name: "车位数", // legend属性
                            label: {
                                // 柱状图上方文本标签，默认展示数值信息
                                show: true,
                                position: "top"
                            }
                        },
                        {
                            type: "bar", //形状为柱状图
                            data: [this.form.carSA,this.form.carSB,this.form.carSC,this.form.carSD],
                            name: "已分配量", // legend属性
                            label: {
                                // 柱状图上方文本标签，默认展示数值信息
                                show: true,
                                position: "top"
                            }
                        },
                        {
                            type: "bar", //形状为柱状图
                            data: [this.form.carCA,this.form.carCB,this.form.carCC,this.form.carCD],
                            name: "已缴费", // legend属性
                            label: {
                                // 柱状图上方文本标签，默认展示数值信息
                                show: true,
                                position: "top"
                            }
                        }
                    ],
                    // color: ['#8f86de', '#9feeb7'],
                    color: ['#5470c6', '#91cc75', '#ddb7fa']
                };
                const myChart = echarts.init(document.getElementById("mychart"));
                myChart.setOption(carsChar);
                //随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },

            // A区车位数量
            getCarsA(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'A',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carA = result.total;
                        this.initBarChart()
                    }
                })
            },
            // A区车位分配量
            getCarStatusA(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'A',
                        parkstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carSA = result.total;
                        this.initBarChart()
                    }
                })
            },
            // B区车位数量
            getCarsB(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'B',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carB = result.total;
                        this.initBarChart()
                    }
                })
            },
            // B区车位分配量
            getCarStatusB(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'B',
                        parkstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carSB = result.total;
                        this.initBarChart()
                    }
                })
            },
            // C区车位数量
            getCarsC(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'C',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carC = result.total;
                        this.initBarChart()
                    }
                })
            },
            // C区车位分配量
            getCarStatusC(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'C',
                        parkstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carSC = result.total;
                        this.initBarChart()
                    }
                })
            },
            // D区车位数量
            getCarsD(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'D',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carD = result.total;
                        this.initBarChart()
                    }
                })
            },
            // D区车位分配量
            getCarStatusD(){
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: 'D',
                        parkstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carSD = result.total;
                        this.initBarChart()
                    }
                })
            },
            // A区车位已缴费
            getCarCostA(){
                this.$Axios({
                    url: '/parking/getParkOrder',
                    method: 'get',
                    data:{
                        parkname: 'A',
                        orderstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carCA = result.total;
                        this.initBarChart()
                    }
                })
            },
            // B区车位已缴费
            getCarCostB(){
                this.$Axios({
                    url: '/parking/getParkOrder',
                    method: 'get',
                    data:{
                        parkname: 'B',
                        orderstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carCB = result.total;
                        this.initBarChart()
                    }
                })
            },
            // C区车位已缴费
            getCarCostC(){
                this.$Axios({
                    url: '/parking/getParkOrder',
                    method: 'get',
                    data:{
                        parkname: 'C',
                        orderstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carCC = result.total;
                        this.initBarChart()
                    }
                })
            },
            // D区车位已缴费
            getCarCostD(){
                this.$Axios({
                    url: '/parking/getParkOrder',
                    method: 'get',
                    data:{
                        parkname: 'D',
                        orderstatus: '1',
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.carCD = result.total;
                        this.initBarChart()
                    }
                })
            },


            // 雷达图
            payLine() {
                // 基于准备好的dom，初始化echarts实例
                let payCharts = this.$echarts.init(document.getElementById('payCharts'))
                let dataMax = [
                    { name: '电费单', max: '12' },
                    { name: '水费固定月单', max: '12' },
                    { name: '水费按量单', max: '12' },
                    { name: '天然气单', max: '12' },
                    { name: '物业费单', max: '12' },
                    { name: '宽带费单', max: '12' },
                ];
                let option = {
                    title: {
                        text: '缴费项目订单',
                        textStyle: {
                            fontWeight: 700,
                            fontSize: 19,
                            lineHeight: 20,
                        },
                        // 标题的位置，此时放在图的底边
                        left: 'right',
                        top: 'top',
                    },
                    legend: {
                        data: ['计费项目'],
                        left: 'left',
                        top: 'top',
                    },
                    //配置维度的最大值
                    radar: {
                        name: {
                            show: true,
                            color: 'grey',
                        },
                        //   雷达图的指示器，用来指定雷达图中的多个变量（维度）
                        indicator: dataMax,
                        shape: 'polygon', //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)

                        splitArea : {
                            show : true,
                            areaStyle : {
                                color: 'rgba(255,231,238,0.69)', // 图表背景的颜色
                                // color: 'rgba(255,235,248,0.69)'
                            },
                        },
                        // splitLine : {
                        //     show : true,
                        //     lineStyle : {
                        //         width : 1,
                        //         color : 'rgba(152,245,143,0.49)', // 设置网格的颜色
                        //     },
                        // },
                        // indicator: [
                        //     { name: '电费单', max},
                        //     { name: '水费固定月单', max},
                        //     { name: '水费按量单', max},
                        //     { name: '天然气单', max},
                        //     { name: '物业费单', max},
                        //     { name: '宽带费单', max},
                        // ]
                    },

                    series: [
                        {
                            type: 'radar',
                            label: {
                                show: true, //显示数值
                            },
                            areaStyle: {}, //每个雷达图形成一个阴影的面积
                            data: [
                                {
                                    name: '计费项目',
                                    value: [this.form.payDF, this.form.paySFY, this.form.paySFL, this.form.payTRQ, this.form.payWYF,this.form.payKDF],
                                    // 设置区域边框和区域的颜色
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(16,158,255)',
                                            lineStyle: {
                                                width: 1,
                                                color: 'rgba(125,198,255,1)'
                                            }
                                        }
                                    },
                                },
                                // {
                                //     name: '苹果手机',
                                //     value: [70, 80, 88, 62, 98,90],
                                // },
                            ],
                        },
                    ],
                }
                // 绘制图表
                payCharts.setOption(option)
                // window.addEventListener("resize", () => {
                //     payCharts.resize();
                // });
            },

            // 获取电费项目
            getCostDF(){
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: 7,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.payDF = result.total;
                        this.payLine()
                    }
                })
            },
            // 获取水费月项目
            getCostSFY(){
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: 8,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.paySFY = result.total;
                        this.payLine()
                    }
                })
            },
            // 获取水费量项目
            getCostSFL(){
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: 9,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.paySFL = result.total;
                        this.payLine()
                    }
                })
            },
            // 获取天然气费项目
            getCostTRQ(){
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: 10,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.payTRQ = result.total;
                        this.payLine()
                    }
                })
            },
            // 获取物业费项目
            getCostWYF(){
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: 11,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.payWYF = result.total;
                        this.payLine()
                    }
                })
            },
            // 获取宽带费项目
            getCostKDF(){
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: 12,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.form.payKDF = result.total;
                        this.payLine()
                    }
                })
            },


            initLogin(){

                this.$Axios({
                    url:"/users/getLoginMonth",
                    method:"get",
                    data:{},

                    success:(result)=> {
                        let time0=0;
                        let time1=0;
                        let time2=0;
                        let time3=0;
                        let time4=0;
                        let time5=0;
                        let time6=0;
                        let time7=0;
                        let time8=0;
                        let time9=0;
                        let time10=0;
                        let time11=0;
                        let time12=0;
                        let time13=0;
                        let time14=0;
                        let time15=0;
                        let time16=0;
                        let time17=0;
                        let time18=0;
                        let time19=0;
                        let time20=0;
                        let time21=0;
                        let time22=0;
                        let time23=0;
                        let time24=0;
                        let time25=0;
                        let time26=0;
                        let time27=0;
                        let time28=0;
                        let time29=0;
                        let time30=0;
                        let time31=0;
                        result.forEach((value,index)=>{
                            let date = value.createtime;
                            let newdate = new Date(date);
                            let newdate1 = newdate.getDate();
                            if(newdate1==1){time1++};
                            if(newdate1==2){time2++};
                            if(newdate1==3){time3++};
                            if(newdate1==4){time4++};
                            if(newdate1==5){time5++};
                            if(newdate1==6){time6++};
                            if(newdate1==7){time7++};
                            if(newdate1==8){time8++};
                            if(newdate1==9){time9++};
                            if(newdate1==10){time10++};
                            if(newdate1==11){time11++};
                            if(newdate1==12){time12++};
                            if(newdate1==13){time13++};
                            if(newdate1==14){time14++};
                            if(newdate1==15){time15++};
                            if(newdate1==16){time16++};
                            if(newdate1==17){time17++};
                            if(newdate1==18){time18++};
                            if(newdate1==19){time19++};
                            if(newdate1==20){time20++};
                            if(newdate1==21){time21++};
                            if(newdate1==22){time22++};
                            if(newdate1==23){time23++};
                            if(newdate1==24){time24++};
                            if(newdate1==25){time25++};
                            if(newdate1==26){time26++};
                            if(newdate1==27){time27++};
                            if(newdate1==28){time28++};
                            if(newdate1==29){time29++};
                            if(newdate1==30){time30++};
                            if(newdate1==31){time31++};
                        })
                        this.monthData.rows.push(
                            { '小时': '00', '用户访问量': time0},
                            { '小时': '01', '用户访问量': time1},
                            { '小时': '02', '用户访问量': time2},
                            { '小时': '03', '用户访问量': time3},
                            { '小时': '04', '用户访问量': time4},
                            { '小时': '05', '用户访问量': time5},
                            { '小时': '06', '用户访问量': time6},
                            { '小时': '07', '用户访问量': time7},
                            { '小时': '08', '用户访问量': time8},
                            { '小时': '09', '用户访问量': time9},
                            { '小时': '10', '用户访问量': time10},
                            { '小时': '11', '用户访问量': time11},
                            { '小时': '12', '用户访问量': time12},
                            { '小时': '13', '用户访问量': time13},
                            { '小时': '14', '用户访问量': time14},
                            { '小时': '15', '用户访问量': time15},
                            { '小时': '16', '用户访问量': time16},
                            { '小时': '17', '用户访问量': time17},
                            { '小时': '18', '用户访问量': time18},
                            { '小时': '19', '用户访问量': time19},
                            { '小时': '20', '用户访问量': time20},
                            { '小时': '21', '用户访问量': time21},
                            { '小时': '22', '用户访问量': time22},
                            { '小时': '23', '用户访问量': time23},
                            { '小时': '24', '用户访问量': time24},
                            { '小时': '25', '用户访问量': time25},
                            { '小时': '26', '用户访问量': time26},
                            { '小时': '27', '用户访问量': time27},
                            { '小时': '28', '用户访问量': time28},
                            { '小时': '29', '用户访问量': time29},
                            { '小时': '30', '用户访问量': time30},
                            { '小时': '31', '用户访问量': time31},
                        );
                    }
                })

                // ECharts折线图方案
                // var chartDom = document.getElementById('loginChart');
                // var myChart = echarts.init(chartDom);
                // var option;
                //
                // option = {
                //     title: {
                //         text: '当月访问用户量'
                //     },
                //     legend: {
                //         data: ['访问用户']
                //     },
                //     xAxis: {
                //         type: 'category',
                //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                //     },
                //     yAxis: {
                //         type: 'value'
                //     },
                //     series: [
                //         {
                //             name: '访问用户',
                //             data: [0, 20, 290, 10, 200, 178, 67],
                //             type: 'line'
                //         }
                //     ]
                // };
                //
                // option && myChart.setOption(option);
            },

            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getRepairData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getRepairData()
            },

            // 获取维修信息
            getRepairData(){
                this.$Axios({
                    url: '/poster/getRepairData',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.repairData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },

            // 分页导航
            handleUserCurrentChange (val) {
                this.cur_page = val
                this.getMyData()
            },
            handleUserSizeChange (val) {
                this.cur_page = 1
                this.pageSize = val;
                this.getMyData()
            },
            // 获取我的信息
            getMyData(){
                this.loading = true;
                this.$Axios({
                    url: '/users/getUsersByTypePage',
                    method: 'get',
                    data:{
                        type: 2,
                        pageNum: this.pageSize,
                        currPage: this.cur_page - 1
                    },
                    success:(result)=>{
                        this.personalData = result.data
                        this.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },

            search(){
                this.loading = true
                this.$axiosToken({
                    url: '/admin/getUserData',
                    method: 'get',
                    data:{
                        inputText: this.input,
                        value: 2,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.personalData = result.data
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },

            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },
            // 状态转为文字
            typeFormatter(row,column){
                const resultstatus = row.resultstatus
                if (resultstatus == 1){
                    return '已修复'
                }else {
                    return '待处理'
                }
            },
            statusFormatter(row,column){
                const parkstatus = row.parkstatus
                if (parkstatus == 1){
                    return '已有车'
                }else {
                    return '未有车'
                }
            },
            costStatusFormatter(row,column){
                const coststatus = row.coststatus
                if (coststatus == 1){
                    return '已支付'
                }else if(coststatus == 2){
                    return '未支付'
                }else {
                    return '暂无'
                }
            }

            //设置el-table行列的样式
            // columnStyle({ row, column, rowIndex, columnIndex }) {
            //
            //         if (row.resultstatus ==1 && columnIndex == 2) {
            //             //字体颜色
            //             return "color:#91cc75;cursor: pointer";
            //         }else if (row.resultstatus ==2 && columnIndex == 2) {
            //             return "color:orange;cursor: pointer";
            //         }
            //
            //
            // },


        },

    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .home{
        width: 100%;
        height: 836px;
        background-color: rgb(240, 240, 240);
    }
    .content{

    }
    .poster{
        position: absolute;
        width: 100%;
        margin-top: 58px;
        background-color: #fff;
        height: 58px;
        display: flex;
        align-items: center;

    }
    .post{
        float: left;
        font-weight: bold;
        color: rgb(73, 149, 247);
        padding: 18px;
        font-size: 14px;
    }
    .newPost{
        overflow: hidden;
        display: flex;
        flex: 1;
        height: 58px;
    }
    .infinite-list{
        width: 100%;
        height: 58px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

    }
    .infinite-list-item{
        font-size: 14px;
        font-weight: bold;
        display: flex;
        margin-left: 70px;
        width: 1300px;
        height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*border: 1px solid grey;*/
        padding: 18px 2px;
    }
    /deep/ .seamless-warp{
        /*overflow: hidden;*/
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .span{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }

    .top{
        position: absolute;
        width: 98.6%;
        height: 130px;
        /*border: 1px solid grey;*/
        margin-top: 126px;
        margin-left: 1%;
        display: flex;
        justify-content: space-between;
    }

    /deep/.el-row {
        box-sizing: border-box;
        width: 100%;
        height: 110px;
        display: flex;
        justify-content: space-between;
    }
    /deep/.el-col-8 {
        width: 25%;
        height: 100%;
    }
    /deep/.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        height: 100%;
        border-radius: 6px;
    }
    .card{
        width: 72%;
        height: 100%;
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: space-between;
    }
    .icon{
        width: 50px;
        height: 40px;

    }
    .text{
        margin-right: -3%;
        width: 100px;
        height: 40px;
    }
    .number{
        font-size: 32px;
        font-weight: bold;
    }
    .desc{
        font-size: 14px;
        margin-top: 8px;
    }

    .mid{
        position: absolute;
        width: 98.6%;
        height: 290px;
        /*border: 1px solid grey;*/
        margin-top: 252px;
        margin-left: 1%;
        display: flex;
        justify-content: space-between;
    }
    /deep/.el-card.midCard.is-always-shadow, .el-card.midCard.is-hover-shadow:focus, .el-card.midCard.is-hover-shadow:hover {
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        width: 94%;
        height: 290px;
        border-radius: 6px;
        padding: 0 8px;
    }
    .pie{
        width: 100%;
        height: 100%;
    }
    .down{
        position: absolute;
        width: 98.6%;
        height: 270px;
        /*border: 1px solid grey;*/
        margin-top: 555px;
        margin-left: 1%;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
    }
    /deep/.el-card.downCard.is-always-shadow, .el-card.downCard.is-hover-shadow:focus, .el-card.downCard.is-hover-shadow:hover {
         box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
         width: 98%;
         height: 270px;
         border-radius: 6px;
         padding: 0 8px;
         margin-bottom: 15px;
     }

    /deep/.el-card.downCardRight.is-always-shadow, .el-card.downCardRight.is-hover-shadow:focus, .el-card.downCardRight.is-hover-shadow:hover {
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        width: 100%;
        height: 270px;
        border-radius: 6px;
        padding: 0 8px;
        margin-left: -3%;
        margin-bottom: 10px;
    }
    .month_title{
        font-size: 18px;
        font-weight: bold;
        margin-left: -15px;
        margin-top: -10px;
    }
    /deep/.el-pager li{
        cursor: default;
        font-size: 12px;
    }
    /deep/.el-input--mini .el-input__inner {
        height: 24px;
        width: 45%;
        line-height: 28px;
        border-radius: 30px;
        float: right;
    }
    /deep/.downCardRight>>>.el-card__body {
        padding: 12px;
    }
</style>